<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a routerLink="/welcome">
        <img src="assets/barn-logo-200.png" alt="logo">
        <h1>Barn</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
      <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let m of menus">

          <li *ngIf="m.children&&m.children.length" nz-submenu [nzTitle]="titleTpl" [nzOpen]="m.expand"
              [nzPaddingLeft]="(m.level+1) * 24">
            <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: m.children }"></ng-container>
          </li>
          <ng-template #titleTpl>
            <i *ngIf="!m.icon && !m.parentId" nz-icon nzType="appstore"></i>
            <i *ngIf="m.icon && !m.parentId" nz-icon>
              <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px">
                <image [attr.href]="m.icon" height="14px" width="14px" style="width: 100%;    height: 100%;"/>
              </svg>
            </i><span>{{m.menuName}}</span>
          </ng-template>

          <li *ngIf="!(m.children&&m.children.length)" nz-menu-item nzMatchRouter [nzPaddingLeft]="(m.level+1) * 24">
            <a [routerLink]="m.path">
              <i *ngIf="!m.icon" nz-icon nzType="appstore"></i>
              <i *ngIf="m.icon" nz-icon >
                <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px">
                  <image [attr.href]="m.icon" height="14px" width="14px" style="width: 100%;    height: 100%;"/>
                </svg>
              </i>
              <span *ngIf="!isCollapsed || m.parentId">{{m.menuName}}</span></a>
          </li>
        </ng-container>
      </ng-template>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header" nz-row>
        <div nz-col nzXs="2" nzSm="2" class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </div>
        <div nz-col nzXs="16" nzSm="16">

        </div>
        <div nz-col nzXs="3" nzSm="3" class="login-user-name" nz-typography>
          <i class="trigger" nz-icon nzType="user"></i>{{loginUser.userName}}
        </div>
        <div nz-col nzXs="1" nzSm="1" class="header-trigger" (click)="logout()">
          <i class="trigger" nz-icon nzType="logout"></i>
        </div>

      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
